<template>
  <div>
    <div class="card-group mb-3">
      <div v-for="(item, key) in userTask" class="card card-hover" :key="key">
        <div class="card-body p-3">
          <router-link class="task-title" :to="item.url">
            <span>{{ item.title }}</span>
          </router-link>
          <div class="text-muted mb-2">
            <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
              {{ subItem.prefix }}
              <span :class="subItem.css || ''">{{ subItem.num }}</span>
              万元
            </div>
          </div>
          <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
            <router-link :to="list.url || ''">
              <div class="d-flex">
                <small
                  :class="[isCurrentRouter(list) ? 'text-primary font-weight-bold' : 'text-muted']"
                >
                  <span class="mr-3">{{ list.title }}</span>
                  <span>{{ list.num }}</span>
                </small>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-bar-full"
                  :class="`bg-${list.bgColor}`"
                  :style="{ width: `${list.percent}%` }"
                ></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      task: {
        prelim: {
          title: '项目预审',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            { prefix: '我审：', num: 0, css: 'font-weight-bold text-primary' },
            { prefix: '未审：', num: 0 },
          ],
          url: { name: 'taskPrelim', query: { status: '' } },
          list: [
            {
              title: '未审项目',
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'taskPrelim', query: { status: 0 } },
            },
            {
              title: '我审项目',
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'taskPrelim', query: { status: 1 } },
            },
            {
              title: '未通过项目',
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'taskPrelim', query: { status: 2 } },
            },
          ],
        },
        dist: {
          title: '任务分配',
          job: ['org_c_manage', 'org_credit_super'],
          subTitle: [
            { prefix: '已分配：', num: 0, css: 'font-weight-bold text-primary' },
            { prefix: '未分配：', num: 0 },
          ],
          url: { name: 'taskDist', query: { status: '' } },
          list: [
            {
              title: '未分配',
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'taskDist', query: { status: 0 } },
            },
            {
              title: '已分配',
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'taskDist', query: { status: 1 } },
            },
            {
              title: '未通过项目',
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'taskDist', query: { status: 2 } },
            },
          ],
        },
        survey: {
          title: '项目调查',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            { prefix: '已通过：', num: 0, css: 'font-weight-bold text-primary' },
            { prefix: '未调查：', num: 0 },
          ],
          url: { name: 'taskSurvey' },
          list: [
            {
              title: '未调查项目',
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'taskSurvey', query: { status: 0 } },
            },
            {
              title: '调查中项目',
              num: 0,
              percent: 0,
              bgColor: 'warning',
              url: { name: 'taskSurvey', query: { status: 2 } },
            },
            {
              title: '已调查项目',
              num: 0,
              percent: 0,
              bgColor: 'ondine',
              url: { name: 'taskSurvey', query: { status: 1 } },
            },
            {
              title: '已通过项目',
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'taskSurvey', query: { status: 3 } },
            },
          ],
        },
        rating: {
          title: '信用评级',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            { prefix: '已评级：', num: 0, css: 'font-weight-bold text-primary' },
            { prefix: '未评级：', num: 0 },
          ],
          url: { name: 'taskRating' },
          list: [
            {
              title: '待确认评级',
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'taskRating', query: { status: 0 } },
            },
            {
              title: '评级中项目',
              num: 0,
              percent: 0,
              bgColor: 'warning',
              url: { name: 'taskRating', query: { status: 1 } },
            },
            {
              title: '已评级项目',
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'taskRating', query: { status: 2 } },
            },
          ],
        },
        register: {
          title: '审批登记',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            { prefix: '已审批：', num: 0, css: 'font-weight-bold text-primary' },
            { prefix: '未审批：', num: 0 },
          ],
          url: { name: 'taskRegister' },
          list: [
            {
              title: '未审批项目',
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'taskRegister', query: { status: 0 } },
            },
            {
              title: '已审核项目',
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'taskRegister', query: { status: 1 } },
            },
            {
              title: '未通过项目',
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'taskRegister', query: { status: 2 } },
            },
          ],
        },
        postloan: {
          title: '贷后管理',
          job: [
            'org_corp',
            'org_c_manage',
            'org_c_emp',
            'org_r_manage',
            'org_r_emp',
            'org_p_manage',
            'org_p_emp',
            'org_credit_super',
            'org_c_general',
            'org_c_general_emp',
          ],
          subTitle: [
            { prefix: '在保：', num: 0, css: 'font-weight-bold text-primary' },
            { prefix: '异常：', num: 0 },
          ],
          url: { name: 'taskPostloan' },
          list: [
            {
              title: '在保项目',
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'taskPostloan', query: { status: 1 } },
            },
            {
              title: '完结项目',
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'taskPostloan', query: { status: 6 } },
            },
            {
              title: '异常项目',
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'taskPostloan', query: { status: 2 } },
            },
          ],
        },
      },
      userTask: {},
    }
  },
  computed: {
    job() {
      return this.$store.getters.user.job
    },
    routeStatus() {
      const status = this.$route.query.status
      return status === undefined ? '' : status
    },
    routeNameStatus() {
      return this.$route.name + this.routeStatus
    },
    taskCount() {
      return this.$store.getters.taskCount
    },
  },
  watch: {
    taskCount: {
      handler: function () {
        this.getTaskCount()
      },
      deep: true,
    },
  },
  created() {
    this.getTaskCount()
    this.initTask()
    this.$store.dispatch('getTaskCount')
  },
  mounted() {},
  methods: {
    getTaskCount() {
      if (!this.taskCount.user_id) {
        return
      }

      // 项目预审
      let dataCount = this.getNumAndPercent(
        this.taskCount.pre_no_approval_total,
        this.taskCount.pre_my_approval_total,
        this.taskCount.pre_fail_approval_total
      )
      this.task.prelim.subTitle[0].num = this.getNumber(this.taskCount.pre_my_approval_funds) // 我审
      this.task.prelim.subTitle[1].num = this.getNumber(this.taskCount.pre_no_approval_funds) // 未审
      this.setNumAndPercent('prelim', dataCount.data)

      // 任务分配
      dataCount = this.getNumAndPercent(
        this.taskCount.task_no_total,
        this.taskCount.task_my_total,
        this.taskCount.task_fail_total
      )
      this.task.dist.subTitle[0].num = this.getNumber(this.taskCount.task_my_funds) // 已分配
      this.task.dist.subTitle[1].num = this.getNumber(this.taskCount.task_no_funds) // 未分配
      this.setNumAndPercent('dist', dataCount.data)

      // 项目调查
      dataCount = this.getNumAndPercent(
        this.taskCount.sur_no_total,
        this.taskCount.sur_ing_total,
        this.taskCount.sur_yes_total,
        this.taskCount.sur_approval_total
      )
      this.task.survey.subTitle[0].num = this.getNumber(this.taskCount.sur_approval_funds) // 已通过
      this.task.survey.subTitle[1].num = this.getNumber(this.taskCount.sur_no_funds) // 未调查
      this.setNumAndPercent('survey', dataCount.data)

      // 信用评级
      dataCount = this.getNumAndPercent(
        this.taskCount.level_no_total,
        this.taskCount.level_ing_total,
        this.taskCount.level_yes_total
      )
      this.task.rating.subTitle[0].num = this.getNumber(this.taskCount.level_yes_funds) // 已评级
      this.task.rating.subTitle[1].num = this.getNumber(this.taskCount.level_no_funds) // 未评级
      this.setNumAndPercent('rating', dataCount.data)

      // 审批登记
      dataCount = this.getNumAndPercent(
        this.taskCount.register_no_total,
        this.taskCount.register_yes_total,
        this.taskCount.register_fail_total
      )
      this.task.register.subTitle[0].num = this.getNumber(this.taskCount.register_yes_funds) // 已审批
      this.task.register.subTitle[1].num = this.getNumber(this.taskCount.register_no_funds) // 未审批
      this.setNumAndPercent('register', dataCount.data)

      // 贷后管理
      dataCount = this.getNumAndPercent(
        this.taskCount.load_beh_normal_total,
        this.taskCount.load_beh_success_total,
        this.taskCount.load_beh_fail_total
      )
      this.task.postloan.subTitle[0].num = this.getNumber(this.taskCount.load_beh_normal_funds) // 在保
      this.task.postloan.subTitle[1].num = this.getNumber(this.taskCount.load_beh_fail_funds) // 异常
      this.setNumAndPercent('postloan', dataCount.data)
    },

    setNumAndPercent(key, data) {
      for (let i = 0; i < data.length; i++) {
        const item = this.task[key].list[i]
        item.num = data[i].count
        item.percent = data[i].percent
      }
    },

    getNumber(str) {
      return +str || 0
    },

    getPercent(top, bottom) {
      return !bottom ? 0 : (top / bottom) * 100
    },

    getNumAndPercent(...args) {
      const countArr = []
      let sum = 0
      for (let arg of args) {
        const count = this.getNumber(arg)
        sum += count
        countArr.push(count)
      }

      const data = []
      for (let i = 0; i < countArr.length; i++) {
        const count = countArr[i]
        data.push({
          count,
          percent: this.getPercent(count, sum),
        })
      }

      return { sum, data }
    },

    async initTask() {
      let redirect = ''
      this.userTask = {}
      const keys = Object.keys(this.task)
      keys.forEach(key => {
        const item = this.task[key]
        if (item.job && item.job.includes(this.job)) {
          this.userTask[key] = { ...item }

          // 第一次进入我的任务，自动进入第一个任务
          if (!redirect) {
            redirect = item.url
          }
        }
      })

      const route = this.$route
      if (route.name !== 'taskHome') {
        // 刷新
        redirect = { ...route }
      } else {
        // 查看详情后返回时，进入当前任务
        const r = sessionStorage.getItem('credit_task_router')
        if (r && keys.includes(r)) {
          redirect = { name: `task${r.substring(0, 1).toUpperCase()}${r.substring(1)}` }
        }
      }
      this.$router.replace(redirect)
    },

    getCol(obj) {
      const len = Object.keys(obj).length
      return len === 1 || len === 5 || len > 6 ? 2 : 12 / len
    },

    isCurrentRouter(item) {
      return !(!item.url || this.routeNameStatus !== `${item.url.name}${item.url.query.status}`)
    },
  },
}
</script>
<style scoped lang="scss">
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;

  &:hover {
    /* border-color: lighten($primary, 20%);
    border-color: var(--primary-light-4); */
    box-shadow: 0 2px 6px $gray-400;
  }
}

.bg-ondine {
  background-color: #40e0d0;
}
</style>
